<template>
	<div class="base-card rounded-md bg-bg-3">
		<div
			class="h-10 px-3 flex justify-between items-center text-sm text-t-1 app-font-bold cursor-pointer"
			@click="toggleOpen">
			<slot name="title">
				<base-text :text="title" :textT="titleT" class=""></base-text>
			</slot>
			<slot name="more">
				<base-icon
					name="down1"
					class="duration-300"
					:class="{
						'rotate-180': open
					}"></base-icon>
			</slot>
		</div>
		<transition
			enter-active-class="animate__animated animate__fadeIn"
			leave-active-class="animate__animated animate__fadeOut">
			<div v-show="open" :class="contentPadding">
				<slot></slot>
			</div>
		</transition>
	</div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'

const props = defineProps({
	titleT: {
		type: String,
		default: ''
	},
	title: {
		type: String,
		default: ''
	},
	collapsible: {
		type: Boolean,
		default: true
	},
	collapse: {
		type: Boolean,
		default: false
	},
	contentPadding: {
		type: String,
		default: 'px-3 pb-3'
	}
})

const open = ref(false)

const toggleOpen = () => {
	if (props.collapsible) {
		open.value = !open.value
	}
}

watch(
	() => props.collapse,
	() => {
		open.value = !props.collapse
	},
	{
		immediate: true
	}
)
</script>
